<script setup lang="js">
    import * as echarts from 'echarts'
    import axios from 'axios';
    import { ref,reactive,onMounted } from 'vue';
    //-导入地图的数据
    import china_geo from '../resource/china.json'
    import { formatter } from 'element-plus';


    let options = reactive([]);

    //-省份的匹配（目前服务器返回的省份名称与json数据中的省份名称不匹配）
    function formatCityName(cityName){
        const replacements = {
            "浙江": "浙江省",
            "上海": "上海市",
            "重庆": "重庆市",
            "河北": "河北省",
            "北京": "北京市",
            "天津": "天津省",
            "山西": "山西省",
            "海南": "海南省",
            "内蒙古": "内蒙古自治区",
            "湖北": "湖北省",
            "广西": "广西壮族自治区",
            "湖南": "湖南省",
            "辽宁":"辽宁省",
            "吉林": "吉林省",
            "黑龙江": "黑龙江省",
            "江苏": "江苏省",
            "安徽": "安徽省",
            "福建": "福建省",
            "江西": "江西省",
            "山东": "山东省",
            "湖北": "湖北省",
            "河南": "河南省",
            "广东": "广东省",
            "海南": "海南省",
            "四川":"四川省",
            "甘肃": "甘肃省",
            "青海": "青海省",
            "甘肃": "甘肃省",
            "新疆": "新疆维吾尔自治区",
            "西藏": "西藏自治区",
            "宁夏": "宁夏回族自治区",
            "陕西": "陕西省",
            "云南": "云南省",
            "贵州": "贵州省",
            //-自行添加
        };
        return replacements[cityName] || cityName;
    }

    const chartMap = ref();
    //-初始化图表
    function initChart(){
        //初始化echarts实例对象
        const myChart = echarts.init(chartMap.value,'light',{
            height: 1200,
            width: 1000
        })
        //将地图数据注入到echarts中
        echarts.registerMap('china',china_geo);
        // 图表的配置项
        const option = {
            //-标题
          
            title: {
                text: '双\n一\n流\n学\n校\n全\n国\n分\n布\n可\n视\n化',
                top:'35%',
                left:"0px",
                textStyle: {
                    color: '#fff',
                    fontWeight: 'bold',
                    fontSize: '25px'
                }
            },
           
            //-图例
            tooltip:{
              trigger: 'item',
              /*
              formatter: function(params){
                var res = '本省双一流学校<br/>'
                console.log('===>')
               
                console.log(params)



                console.log('===>')
                res += '北大<br/>'
                res += '清华<br/>'
                return res
              }*/
              },
               
            
            //-数据:地图配置
            
         geo: [
          {
            map: 'china',
            aspectScale: 1,
            zoom: 0.9,
            layoutCenter: ['50%', '50%'],
            layoutSize: '100%',
            show: true,
            roam: false,
            label: {
              show: false, // 各个省市县的名字
              color: '#fff',
            },
            itemStyle: {
              // 每块的样式
              areaColor: {
                type: 'linear',
                x: 1200,
                y: 0,
                x2: 0,
                y2: 0,
                colorStops: [
                  {
                    offset: 0,
                    color: 'rgba(3,27,78,0.75)',
                  },
                  {
                    offset: 1,
                    color: 'rgba(58,149,253,0.75)',
                  },
                ],
                global: true, // 缺省为 false
              },
              borderColor: '#c0f3fb',
              borderWidth: 0.8,
            },
            emphasis: {
              itemStyle: {
                show: false,
                color: '#fff',
                areaColor: 'rgba(0,254,233,0.6)',
              },
              label: {
                show: true,
                color: '#fff',

              },
            },
          },
          // 重影
          {
            type: 'map',
            map: 'china',
            zlevel: -1,
            aspectScale: 1,
            zoom: 0.9,
            layoutCenter: ['50%', '51%'],
            layoutSize: '100%',
            roam: false,
            silent: true,
            itemStyle: {
              borderWidth: 1,
              borderColor: 'rgba(58,149,253,0.8)',
              shadowColor: 'rgba(172, 122, 255,0.5)',
              shadowOffsetY: 5,
              shadowBlur: 15,
              areaColor: 'rgba(5,21,35,0.1)',
            },
          },
          {
            type: 'map',
            map: 'china',
            zlevel: -2,
            aspectScale: 1,
            zoom: 0.9,
            layoutCenter: ['50%', '52%'],
            layoutSize: '100%',
            roam: false,
            silent: true,
            itemStyle: {
              borderWidth: 1,
              borderColor: 'rgba(58,149,253,0.6)',
              shadowColor: 'rgba(65, 214, 255,0.6)',
              shadowOffsetY: 5,
              shadowBlur: 15,
              areaColor: 'rgba(5,21,35,0.1)',
            },
          },
          {
            type: 'map',
            map: 'china',
            zlevel: -3,
            aspectScale: 1,
            zoom: 0.9,
            layoutCenter: ['50%', '53%'],
            layoutSize: '100%',
            roam: false,
            silent: true,
            itemStyle: {
              borderWidth: 1,
              borderColor: 'rgba(58,149,253,0.4)',
              shadowColor: 'rgba(29, 111, 165,1)',
              shadowOffsetY: 15,
              shadowBlur: 10,
              areaColor: 'rgba(5,21,35,0.1)',
            },
          },
          {
            type: 'map',
            map: 'china',
            zlevel: -4,
            aspectScale: 1,
            zoom: 0.9,
            layoutCenter: ['50%', '54%'],
            layoutSize: '100%',
            roam: false,
            silent: true,
            itemStyle: {
              borderWidth: 5,
              borderColor: 'rgba(5,9,57,0.8)',
              shadowColor: 'rgba(29, 111, 165,0.8)',
              shadowOffsetY: 15,
              shadowBlur: 10,
              areaColor: 'rgba(5,21,35,0.1)',
            },
          },
        ],
 
            //-数据的效果
            series: [
                {
                    name:"该省双一流大学",
                    geoIndex: 0,
                    //-涟漪特效动画
                    color:"#2CEAA3",
                    type: 'effectScatter',
                    showEffectOn: 'render',
                    data: [{name:'北大-清华',value:[116.405285,39.904989]},
                    ],
                    coordinateSystem: 'geo',
                    //-特效设置
                    rippleEffect: {
                        number: 3,
                        scale: 5,
                        color:"#2CEAA3"
                    }
                },
             
            ]
        }
         //-动态赋值：
        const provinceData = reactive([]) 
        
        for(let index=0;index<options.length;index++){
                        //console.log(data[index].province)
                        //-获取数据库中对应的省份名称
                        let province = options[index].province;
                        //-:获取省份坐标
                        let obj = china_geo.features.find(item=> item.properties.name === formatCityName(province))
                        //console.log(obj)
                        //-如果没有省份名称，则出现空的现象
                        if(obj!=undefined){
                            //console.log(options[index].citySchool+'---'+obj.properties.center)
                            let provinceObj = {
                                name: options[index].citySchool,
                                value: obj.properties.center
                            }
                            provinceData.push(provinceObj);
                        }

        }
        console.log(provinceData[1])
       // option.series[0].data = provinceData;
      //  option.tooltip.formatter(provinceData)
        
        // 将图表与数据项进行绑定
        myChart.setOption(option);
    
      }
      //-：获取后端中返回的省份信息
    function getData(){
        axios.get('/Pro-Postgraduate/queryAllDFC')
            .then((response)=>{
                //console.log(response.data)
                if(response.data.code==200){
                  let data = response.data.data;
                  options = data;
                  //=:初始化图表
                  initChart();
                  //console.log(response.data)
                }
            })
    }
    onMounted(()=>{
      getData();
      //initChart();
    })

</script>
<template>
    <div ref="chartMap" ></div>
    
</template>
<style lang="css" scoped>
  *{
    position: relative;
    left: 3%;
    right:0%;
    bottom: 43%;
  }
</style>
